<template>
  <div>
    <el-container style="height: 100vh;">
      <el-header style="height: 50px; padding: 0;">
        <div class="header-box">
          <div class="logo-box">
            <img src="../assets/logo.png" class="logo">
          </div>
          <div class="system-name">小鹅定制后台管理</div>
          <div class="news_box"><el-button type="danger" icon="el-icon-chat-dot-round" circle size="small" style="margin-top: 10px;" @click="changeNewsIsShow(1)"></el-button></div>
          <div class="header-right-box">
            <div class="avatar-box">
              <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
            </div>
            <div class="sname-box">{{ accountName }}</div>
            <div class="logout">
              <el-button type="text" @click="logout">退出登录</el-button>
            </div>
          </div>
        </div>
      </el-header>
      <el-container style="height: calc(100vh - 50px);">
        <el-aside width="200px">
          <div class="menu-box">
            <ul>
              <li :class="choiceMenu === 1 ? 'menu-li menu_selected' : 'menu-li'" :style="{ backgroundColor: choiceMenu === 1 ? '#d2dbf4' : '#fff' }" @click="choice_menu(1)">
                <div class="menu-li-icon_box">
                  <img :src="choiceMenu === 1?require('../assets/menu-icons/icon1_selected.png'):require('../assets/menu-icons/icon1.png')" class="menu-li-icon">
                </div>
                <div class="menu-li-name" :style="{ color: choiceMenu === 1 ? '#1e4dc6' : '#7d7d7d' }">首页</div>
                <div class="menu-li-s-box">
                  <img :src="choiceMenu === 1?require('@/assets/menu-icons/sanjiao_selected.png'):require('@/assets/menu-icons/sanjiao.png')" class="menu-li-s">
                </div>
              </li>
              <li :class="choiceMenu === 2 ? 'menu-li menu_selected' : 'menu-li'" :style="{ backgroundColor: choiceMenu === 2 ? '#d2dbf4' : '#fff' }" @click="choice_menu(2)">
                <div class="menu-li-icon_box">
                  <img :src="choiceMenu === 2?require('../assets/menu-icons/icon2_selected.png'):require('../assets/menu-icons/icon2.png')" class="menu-li-icon">
                </div>
                <div class="menu-li-name" :style="{ color: choiceMenu === 2 ? '#1e4dc6' : '#7d7d7d' }">订单管理</div>
                <div class="menu-li-s-box">
                  <img :src="choiceMenu === 2?require('@/assets/menu-icons/sanjiao_selected.png'):require('@/assets/menu-icons/sanjiao.png')" class="menu-li-s">
                </div>
              </li>
              <li :class="choiceMenu === 3 ? 'menu-li menu_selected' : 'menu-li'" :style="{ backgroundColor: choiceMenu === 3 ? '#d2dbf4' : '#fff' }" @click="choice_menu(3)">
                <div class="menu-li-icon_box">
                  <img :src="choiceMenu === 3?require('../assets/menu-icons/icon3_selected.png'):require('../assets/menu-icons/icon3.png')" class="menu-li-icon">
                </div>
                <div class="menu-li-name" :style="{ color: choiceMenu === 3 ? '#1e4dc6' : '#7d7d7d' }">数据统计</div>
                <div class="menu-li-s-box">
                  <img :src="choiceMenu === 3?require('@/assets/menu-icons/sanjiao_selected.png'):require('@/assets/menu-icons/sanjiao.png')" class="menu-li-s">
                </div>
              </li>
              <!-- <li v-if="choiceMenu==3" style="height: 50px;">
                <div class="menu-li-name" :style="{ color: choiceSecondMenu === 31 ? '#1e4dc6' : '#7d7d7d' }" style="margin-left: 65px;" @click="choice_secondmenu(31)">数据看板</div>
              </li>
              <li v-if="choiceMenu==3" style="height: 50px;">
                <div class="menu-li-name" :style="{ color: choiceSecondMenu === 32 ? '#1e4dc6' : '#7d7d7d' }" style="margin-left: 65px;width: 120px;" @click="choice_secondmenu(32)">销售情况</div>
              </li> -->
              <li :class="choiceMenu === 4 ? 'menu-li menu_selected' : 'menu-li'" :style="{ backgroundColor: choiceMenu === 4 ? '#d2dbf4' : '#fff' }" @click="choice_menu(4)" v-if="accountType==0">
                <div class="menu-li-icon_box">
                  <img :src="choiceMenu === 4?require('../assets/menu-icons/icon4_selected.png'):require('../assets/menu-icons/icon4.png')" class="menu-li-icon">
                </div>
                <div class="menu-li-name" :style="{ color: choiceMenu === 4 ? '#1e4dc6' : '#7d7d7d' }">产品管理</div>
                <div class="menu-li-s-box">
                  <img :src="choiceMenu === 4?require('@/assets/menu-icons/sanjiao_selected.png'):require('@/assets/menu-icons/sanjiao.png')" class="menu-li-s">
                </div>
              </li>
              <li v-if="choiceMenu==4" style="height: 50px;">
                <div class="menu-li-name" :style="{ color: choiceSecondMenu === 1 ? '#1e4dc6' : '#7d7d7d' }" style="margin-left: 65px;" @click="choice_secondmenu(1)">分类管理</div>
              </li>
              <li v-if="choiceMenu==4" style="height: 50px;">
                <div class="menu-li-name" :style="{ color: choiceSecondMenu === 2 ? '#1e4dc6' : '#7d7d7d' }" style="margin-left: 65px;" @click="choice_secondmenu(2)">产品列表</div>
              </li>
              <!-- <li v-if="choiceMenu==4" style="height: 50px;">
                <div class="menu-li-name" :style="{ color: choiceSecondMenu === 3 ? '#1e4dc6' : '#7d7d7d' }" style="margin-left: 65px;" @click="choice_secondmenu(3)">模板管理</div>
              </li> -->
              <li v-if="choiceMenu==4" style="height: 50px;">
                <div class="menu-li-name" :style="{ color: choiceSecondMenu === 4 ? '#1e4dc6' : '#7d7d7d' }" style="margin-left: 65px;" @click="choice_secondmenu(4)">素材管理</div>
              </li>
              <li :class="choiceMenu === 5 ? 'menu-li menu_selected' : 'menu-li'" :style="{ backgroundColor: choiceMenu === 5 ? '#d2dbf4' : '#fff' }" @click="choice_menu(5)" v-if="accountType==99">
                <div class="menu-li-icon_box">
                  <img :src="choiceMenu === 5?require('../assets/menu-icons/icon5_selected.png'):require('../assets/menu-icons/icon5.png')" class="menu-li-icon">
                </div>
                <div class="menu-li-name" :style="{ color: choiceMenu === 5 ? '#1e4dc6' : '#7d7d7d' }">营销管理</div>
                <div class="menu-li-s-box">
                  <img :src="choiceMenu === 5?require('@/assets/menu-icons/sanjiao_selected.png'):require('@/assets/menu-icons/sanjiao.png')" class="menu-li-s">
                </div>
              </li>
              <li :class="choiceMenu === 6 ? 'menu-li menu_selected' : 'menu-li'" :style="{ backgroundColor: choiceMenu === 6 ? '#d2dbf4' : '#fff' }" @click="choice_menu(6)" v-if="accountType==0">
                <div class="menu-li-icon_box">
                  <img :src="choiceMenu === 6?require('../assets/menu-icons/icon6_selected.png'):require('../assets/menu-icons/icon6.png')" class="menu-li-icon">
                </div>
                <div class="menu-li-name" :style="{ color: choiceMenu === 6 ? '#1e4dc6' : '#7d7d7d' }">客户管理</div>
                <div class="menu-li-s-box">
                  <img :src="choiceMenu === 6?require('@/assets/menu-icons/sanjiao_selected.png'):require('@/assets/menu-icons/sanjiao.png')" class="menu-li-s">
                </div>
              </li>
              <li :class="choiceMenu === 7 ? 'menu-li menu_selected' : 'menu-li'" :style="{ backgroundColor: choiceMenu === 7 ? '#d2dbf4' : '#fff' }" @click="choice_menu(7)" v-if="accountType==0">
                <div class="menu-li-icon_box">
                  <img :src="choiceMenu === 7?require('../assets/menu-icons/icon7_selected.png'):require('../assets/menu-icons/icon7.png')" class="menu-li-icon">
                </div>
                <div class="menu-li-name" :style="{ color: choiceMenu === 7 ? '#1e4dc6' : '#7d7d7d' }">租户管理</div>
                <div class="menu-li-s-box">
                  <img :src="choiceMenu === 7?require('@/assets/menu-icons/sanjiao_selected.png'):require('@/assets/menu-icons/sanjiao.png')" class="menu-li-s">
                </div>
              </li>
              <li :class="choiceMenu === 8 ? 'menu-li menu_selected' : 'menu-li'" :style="{ backgroundColor: choiceMenu === 8 ? '#d2dbf4' : '#fff' }" @click="choice_menu(8)">
                <div class="menu-li-icon_box">
                  <img :src="choiceMenu === 8?require('../assets/menu-icons/icon8_selected.png'):require('../assets/menu-icons/icon8.png')" class="menu-li-icon">
                </div>
                <div class="menu-li-name" :style="{ color: choiceMenu === 8 ? '#1e4dc6' : '#7d7d7d' }">系统设置</div>
                <div class="menu-li-s-box">
                  <img :src="choiceMenu === 8?require('@/assets/menu-icons/sanjiao_selected.png'):require('@/assets/menu-icons/sanjiao.png')" class="menu-li-s">
                </div>
              </li>
            </ul>
          </div>
        </el-aside>
        <el-main>
          <index-data ref="indexData"></index-data>
          <order-management ref="orderManagement"></order-management>
          <data-statistics ref="dataStatistics"></data-statistics>
          <goods-management ref="goodsManagement"></goods-management>
          <marketing-set ref="marketingSet"></marketing-set>
          <customer-management ref="customerManagement"></customer-management>
          <supplier-management ref="supplierManagement"></supplier-management>
          <system-set ref="SystemSet"></system-set>
          <sort-list ref="sortList"></sort-list>
          <sales-progress ref="salesProgress"></sales-progress>
          <template-management ref="templateManagement"></template-management>
        </el-main>
      </el-container>
    </el-container>
    <div class="newstk_box" v-if="isShowNews==1">
      <div class="newstk_title_box">
        <img src="../assets/icon-tips.png" class="icon_tips">
        <div class="newstk_title">发货提醒</div>
        <img src="../assets/icon-close.png" class="icon_close" @click="changeNewsIsShow(0)">
      </div>
      <div class="newstk_content_box">
        <div class="newstk_content">未发货订单：{{iData[0]}}</div>
        <div class="newstk_content">昨日出货量：{{iData[1]}}</div>
      </div>
    </div>
  </div>
</template>
<script>

import indexData from "@/components/indexData.vue";
import orderManagement from "@/components/orderManagement.vue";
import dataStatistics from "@/components/dataStatistics.vue";
import goodsManagement from "@/components/goodsManagement.vue";
import marketingSet from "@/components/marketingSet.vue";
import customerManagement from "@/components/customerManagement.vue";
import supplierManagement from "@/components/supplierManagement.vue";
import SystemSet from "@/components/systemSet.vue";
import sortList from "@/components/sortList.vue";
import salesProgress from "@/components/salesProgress.vue";
import templateManagement from "@/components/templateManagement.vue";


export default {
  components: {
    indexData,
    orderManagement,
    dataStatistics,
    goodsManagement,
    marketingSet,
    customerManagement,
    supplierManagement,
    SystemSet,
    sortList,
    salesProgress,
    templateManagement
  },
  data() {
    return {
      choiceMenu:1,
      choiceSecondMenu:1,
      accountName:sessionStorage.getItem('supplierName'),
      accountType:sessionStorage.getItem('supplierType'),
      accountId:Number(sessionStorage.getItem("supplierId")),
      isShowNews:0,
      iData:[]
    };
  },
  created() {
    
  },
  methods: {
    getIndexManagerData(){
      var url="manager/getIndexManagerData";
      var params={
        accountType: this.accountType,
        accountId:this.accountId,
      }
      this.$post(url, params).then((res) => {
        console.log(res)
        if (res.code === 0) {
          this.iData=res.data;
        } else {
          this.$message.error(res.msg)
        }
      });
    },
    changeNewsIsShow(type){
      if(type==1){
        this.getIndexManagerData();
      }
      this.isShowNews=type;
    },
    choice_menu(id){
      this.closeAllBox();
      this.choiceMenu=id;
      if(id==1){
        //显示首页
        if (this.$refs.indexData) {
          this.$refs.indexData.boxIsShow = true;
          this.$refs.indexData.__init();
        }
      }else if(id==2){
        //订单管理
        if (this.$refs.orderManagement) {
          this.$refs.orderManagement.boxIsShow = true;
          this.$refs.orderManagement.__init();
        }
      }else if(id==3){
        //数据统计
        //this.choice_secondmenu(31);
        if (this.$refs.dataStatistics) {
          this.$refs.dataStatistics.boxIsShow = true;
          this.$refs.dataStatistics.__init();
        }
      }else if(id==4){
        //产品管理
        this.choice_secondmenu(1);
      }else if(id==5){
        //营销管理
        if (this.$refs.marketingSet) {
          this.$refs.marketingSet.boxIsShow = true;
          this.$refs.marketingSet.__init();
        }
      }else if(id==6){
        //客户管理
        if (this.$refs.customerManagement) {
          this.$refs.customerManagement.boxIsShow = true;
          this.$refs.customerManagement.__init();
        }
      }else if(id==7){
        //租户管理
        if (this.$refs.supplierManagement) {
          this.$refs.supplierManagement.boxIsShow = true;
          this.$refs.supplierManagement.__init();
        }
      }else if(id==8){
        //系统设置
        if (this.$refs.SystemSet) {
          this.$refs.SystemSet.boxIsShow = true;
          this.$refs.SystemSet.__init();
        }
      }
    },
    choice_secondmenu(id){
      this.closeAllBox();
      this.choiceSecondMenu=id;
      if(id==2){
        //产品管理
        if (this.$refs.goodsManagement) {
          this.$refs.goodsManagement.boxIsShow = true;
          this.$refs.goodsManagement.__init();
        }
      }else if(id==1){
        //分类管理
        if (this.$refs.sortList) {
          this.$refs.sortList.boxIsShow = true;
          this.$refs.sortList.__init();
        }
      }else if(id==3){
        //模板管理
        if (this.$refs.goodsManagement) {
          this.$refs.goodsManagement.boxIsShow = true;
          this.$refs.goodsManagement.__init();
        }
      }else if(id==4){
        //编辑器边框管理
        if (this.$refs.templateManagement) {
          this.$refs.templateManagement.boxIsShow = true;
          this.$refs.templateManagement.__init();
        }
      }else if(id==31){
        //数据看板
        if (this.$refs.dataStatistics) {
          this.$refs.dataStatistics.boxIsShow = true;
          this.$refs.dataStatistics.__init();
        }
      }else if(id==32){
        //产品销量情况
        if (this.$refs.salesProgress) {
          this.$refs.salesProgress.boxIsShow = true;
          this.$refs.salesProgress.__init();
        }
      }
      
    },
    closeAllBox(){
      if (this.$refs.indexData) {
        this.$refs.indexData.boxIsShow = false;
      }
      if (this.$refs.orderManagement) {
        this.$refs.orderManagement.boxIsShow = false;
      }
      if (this.$refs.dataStatistics) {
        this.$refs.dataStatistics.boxIsShow = false;
      }
      if (this.$refs.goodsManagement) {
        this.$refs.goodsManagement.boxIsShow = false;
      }
      if (this.$refs.marketingSet) {
        this.$refs.marketingSet.boxIsShow = false;
      }
      if (this.$refs.customerManagement) {
        this.$refs.customerManagement.boxIsShow = false;
      }
      if (this.$refs.supplierManagement) {
        this.$refs.supplierManagement.boxIsShow = false;
      }
      if (this.$refs.SystemSet) {
        this.$refs.SystemSet.boxIsShow = false;
      }
      if (this.$refs.sortList) {
        this.$refs.sortList.boxIsShow = false;
      }
      if (this.$refs.salesProgress) {
        this.$refs.salesProgress.boxIsShow = false;
      }
      if (this.$refs.templateManagement) {
        this.$refs.templateManagement.boxIsShow = false;
      }
    },
    logout(){
      sessionStorage.clear();
      this.$router.push('/login');
    }
  }
}
</script>
<style scoped lang="scss">
  .header-box{
    height: 100%;
    position: relative;
  }
  .logo-box{
    height: 100%;
    float: left;
    margin-left: 10px;
  }
  .logo{
    height: 40px;
    margin-top: 5px;
  }
  .system-name{
    float: left;
    width: 150px;
    text-align: center;
    line-height: 50px;
    color: #1e4dc6;
    font-size: 18px;
    font-weight: 600;
  }
  .header-right-box{
    position: absolute;
    right: 4%;
  }
  .avatar-box{
    float: left;
    margin-right: 20px;
  }
  .logout{
    float: left;
    line-height: 50px;
    font-size: 14px;
  }
  ::v-deep .el-avatar{
    margin-top: 10px;
    height: 30px;
    width: 30px;
  }
  .menu-box ul{
    padding: 0;
    margin: 0;
    margin-top: 38px;
  }
  .menu-li{
    list-style: none;
    height: 50px;
    margin-bottom: 5px;
  }
  .menu_selected{
    position: relative;
  }
  .menu_selected::after{
    content: "";
    position: absolute;
    height: 100%;
    width: 5px;
    background-color: #1e4dc6;
    top: 0;
    left: 0;
    border-radius: 10px;
  }
  .menu-li-icon_box{
    float: left;
    height: 100%;
    margin-left: 20px;
    width: 25px;
    text-align: center;
  }
  .menu-li-icon{
    height: 22px;
    margin-top: 14px;
  }
  .menu-li-name{
    float: left;
    line-height: 50px;
    font-size: 15px;
    margin-left: 20px;
    width: 70px;
    text-align: left;
    cursor: default;
  }
  .menu-li-s-box{
    float: left;
    height: 100%;
    margin-left: 10px;
  }
  .menu-li-s{
    height: 6px;
    margin-top: 22px; 
  }
  .sname-box{
    float: left;
    line-height: 50px;
    font-size: 14px;
    margin-right: 30px;
  }
  ::v-deep .el-header{
    height: 50px;
    box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.1);
  }
  ::v-deep .el-main{
    padding: 0;
  }
  .news_box{
    position: absolute;
    right: 18%;
  }
  .newstk_box{
    position: fixed;
    width: 300px;
    height: 300px;
    top: 15px;
    right: 2%;
    box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    background-color: #fff;
  }
  .newstk_title_box{
    height: 28px;
    width: 100%;
    margin-top: 8px;
  }
  .icon_tips{
    position: absolute;
    top: 8px;
    left: 10px;
    height: 28px;
  }
  .newstk_title{
    position: absolute;
    height: 28px;
    line-height: 28px;
    left: 42px;
    top: 8px;
    font-size: 16px;
  }
  .icon_close{
    position: absolute;
    height: 12px;
    top: 12px;
    right: 12px;
  }
  .newstk_content_box{
    text-align: left;
    margin-top: 12px;
    font-size: 13px;
    color: #999;
    margin-left: 40px;
  }
  .newstk_content{
    margin-bottom: 10px;
  }
</style>